import { anim, combine, play } from '@dfeidao/animation';
import { IFeidaoAiBrowserComponent } from '@dfeidao/atom-web/interfaces';
import get from '@dfeidao/atom-web/local/get';
import clear_set from '@dfeidao/atom-web/local/remove';
import set from '@dfeidao/atom-web/local/set';
export default async function a002(fd: IFeidaoAiBrowserComponent, args: { currentTarget: HTMLDivElement }) {
	// 点击
	const target = args.currentTarget as HTMLDivElement;
	const target_har = target.parentNode.querySelector('[data-a-b="ab"]');
	const flag = target.getAttribute('flag');
	// const info = JSON.parse(decodeURIComponent(target.getAttribute('data')));
	const level = target.getAttribute('data-feidao-l');
	let anim_arr = new Array();
	if (target_har) {
		const target_3 = target_har.parentNode.parentNode.parentNode as HTMLDivElement;
		if (target_3.getAttribute('data-feidao-level') === '3') {
			// 3
			target_3.childNodes.forEach((v: HTMLDivElement) => {
				v.removeAttribute('style');
			});
			const p2 = target_3.parentNode.childNodes[0] as HTMLDivElement;
			p2.setAttribute('flag', '1');
			add_style(p2, 'bg-theme-3');
			update_icon_1(p2, true);
			set(fd, 's_node', p2);
			// 2
			const target_2 = target_3.parentNode.parentNode as HTMLDivElement;
			target_2.childNodes.forEach((v: HTMLDivElement) => {
				v.removeAttribute('style');
				set_property(v);
			});
			const p1 = target_2.parentNode.childNodes[0] as HTMLDivElement;
			update_icon(p1, true);
			add_style(p1, 'bg-theme');
			add_shu(p1);
			p1.setAttribute('flag', '1');
			set(fd, 's_node', p1);
		} else if (target_3.getAttribute('data-feidao-level') === '2') {
			// 2
			target_3.childNodes.forEach((v: HTMLDivElement) => {
				v.removeAttribute('style');
				set_property(v);
			});
			const p1 = target_3.parentNode.childNodes[0] as HTMLDivElement;
			update_icon(p1, true);
			add_style(p1, 'bg-theme');
			add_shu(p1);
			p1.setAttribute('flag', '1');
			set(fd, 's_node', p1);
		} else {
			const target_1 = target_har.parentNode.parentNode as HTMLDivElement;
			add_style(target_1, 'bg-theme');
		}
		target_har.setAttribute('data-a-b', '');
	} else {

		// 现为折叠状态
		if (flag === '0') {
			const selec_node = get<HTMLDivElement>(fd, 's_node');
			// 当前单击的菜单为1级菜单，则其他已选择的菜单全部关闭
			if (level === '1') {
				target.classList.add('menuf');

				if (selec_node) {
					const s_flag = selec_node.getAttribute('flag');
					// 现为展开
					if (s_flag === '1') {
						// 找到已展开菜单的一级菜单， 将下属所有展开菜单 flag = 1 关闭
						const s_level = selec_node.getAttribute('data-feidao-l');
						let p: Element = null;
						if (s_level === '1') {
							p = selec_node.parentElement;
						} else {
							p = selec_node.closest('[data-feidao-level="1"]');
						}
						update_icon(p as HTMLDivElement, false);
						remove_style(selec_node, 'bg-theme-3');
						remove_style(p.childNodes[0] as HTMLDivElement, 'bg-theme');
						remove_shu(selec_node);
						remove_shu(p.childNodes[0] as HTMLDivElement);
						const f_div = p.querySelector<HTMLDivElement>('[flag="1"]');
						if (f_div) {
							f_div.setAttribute('flag', '0');
						}
						f_div.classList.remove('menuf');
						const s_p = p.querySelectorAll('[name="div2"]');
						if (s_p && s_p.length > 0) {
							const anis = close_node(s_p);
							anim_arr = anim_arr.concat(anis);
						}
					}
				}
				const ss = fd.data.node.querySelectorAll('[data-feidao-s="s"]');
				Array.from(ss).forEach((s: HTMLDivElement) => {
					s.style.setProperty('position', 'absolute');
				});
				const t = target.querySelector<HTMLDivElement>('[data-feidao-s="s"]');
				if (t) {
					t.style.removeProperty('position');
				}
				update_icon(target, true);
				add_style(target, 'bg-theme');
				add_shu(target);
			} else {
				// 同一个1级菜单下，只能是平级或者下级
				const p = target.closest('[data-feidao-level="' + Number(level) + '"]') as HTMLDivElement;
				if (p) {
					const s_p = p.querySelector<HTMLDivElement>('[flag="1"]');
					p.childNodes.forEach((v: HTMLDivElement) => {
						const target_a = v.childNodes[0] as HTMLDivElement;
						remove_style(target_a, 'bg-theme-3');
						update_icon_1(target_a, false);
					});
					if (s_p) {
						s_p.setAttribute('flag', '0');
						const c_s_p = p.querySelectorAll('[name="div' + (Number(level) + 1) + '"]');
						const as = close_node(c_s_p);
						anim_arr = anim_arr.concat(as);
					}
					add_style(target, 'bg-theme-3');
					update_icon_1(target, true);
				}
			}
			// 互斥
			if (target.dataset.feidaoL === '1') {
				set(fd, 's_node', target);
			}
			target.setAttribute('flag', '1');

			// set(fd, 's_info', info);
			const ps = target.parentElement;
			const c_nodes = ps.querySelectorAll('[name="div' + (Number(level) + 1) + '"]');
			if (c_nodes && c_nodes.length > 0) {
				const anims = Array.from(c_nodes).map((n: HTMLDivElement) => {
					set_property(n);
					const obj = { duration: 0 };
					const num_get = get(fd, 'num') as number;
					if (num_get === undefined) {
						delete obj.duration;
					}
					return anim(n, obj, { height: { start: 0, end: 35 } }, {
						end: () => {
							del_property(n);
							// 调用事件
						}
					});
				});
				anim_arr = anim_arr.concat(anims);
			}
		} else {
			// 现为展开状态
			target.classList.remove('menuf');

			target.setAttribute('flag', '0');
			const pn = target.parentElement;
			const c_nodes = pn.querySelectorAll('[name="div' + (Number(level) + 1) + '"]');
			if (c_nodes && c_nodes.length > 0) {
				const aniss = close_node(c_nodes);
				anim_arr = anim_arr.concat(aniss);
				c_nodes.forEach((v) => {
					remove_style(v.childNodes[0] as HTMLDivElement, 'bg-theme-3');
				});
			}
			if (target.dataset.feidaoL === '2') {
				update_icon_1(target, false);
			}
			update_icon(target, false);
			remove_style(target, 'bg-theme', 1);
			remove_shu(target);
		}
	}

	if (anim_arr.length > 0) {
		play(combine(anim_arr));
	}
	clear_set(fd, 'num');
}

function close_child(node: HTMLDivElement) {
	const c_nodes = node.querySelectorAll('[name="xz"]');
	Array.from(c_nodes).forEach((n: HTMLDivElement) => {
		n.parentElement.style.setProperty('display', 'none');
		n.setAttribute('flag', '0');
		update_icon_1(n, false);
	});
}

function del_property(node: HTMLDivElement) {
	node.style.removeProperty('overflow');
	node.style.removeProperty('padding-top');
	node.style.removeProperty('margin-top');
	node.style.removeProperty('height');
}

function set_property(node: HTMLDivElement) {
	node.style.setProperty('overflow', 'hidden');
	node.style.setProperty('padding-top', '0');
	node.style.setProperty('margin-top', '0');
}
function add_style(node: HTMLDivElement, bg_theme: string) {
	node.classList.add(bg_theme);
}
function remove_style(node: HTMLDivElement, bg_theme: string, remov?: number) {
	if (remov) {
		node.classList.remove('bg-theme');
	} else {
		node.classList.remove(bg_theme);
	}
}

function add_shu(node: HTMLDivElement) {
	// const first = node.childNodes[0] as HTMLSpanElement;
	const er = node.childNodes[1] as HTMLSpanElement;
	// first.style.setProperty('border-right', '4px solid');
	er.style.setProperty('width', '100px');
}

function remove_shu(node: HTMLDivElement) {
	if (node.childNodes.length === 1) {
		const first = node.childNodes[0].childNodes[0].childNodes[0] as HTMLSpanElement;
		const er = node.childNodes[0].childNodes[0].childNodes[1] as HTMLSpanElement;
		first.style.setProperty('border-right', '');
		er.style.setProperty('width', '70px');
	} else {
		const first = node.childNodes[0] as HTMLSpanElement;
		const er = node.childNodes[1] as HTMLSpanElement;
		first.style.setProperty('border-right', '');
		er.style.setProperty('width', '100px');
	}
}
function close_node(c_nodes: NodeListOf<Element>) {
	const aniss = Array.from(c_nodes).map((n: HTMLDivElement) => {
		n.setAttribute('flag', '0');
		set_property(n);
		return anim(n, {}, { height: { start: n.clientHeight, end: 0 } }, {
			end: () => {
				del_property(n);
				n.style.setProperty('display', 'none');
				// 修改子级
				close_child(n);
			}
		});
	});
	return aniss;
}

function update_icon(node: HTMLDivElement, up: false | true) {
	const i = node.querySelector<HTMLImageElement>('[data-feidao-id="icon"]');
	if (i) {
		// i.src = up ? './images/jt_top.png' : './images/jt_button.png';
		if (up) {
			i.classList.remove('icon-down');
			i.classList.add('icon-up');
		} else {
			i.classList.remove('icon-up');
			i.classList.add('icon-down');
		}
	}
}
function update_icon_1(node: HTMLDivElement, up: false | true) {
	const i = node.querySelector<HTMLImageElement>('[data-feidao-id="icon"]');
	if (i) {
		// i.src = up ? './images/jt_top.png' : './images/jt_button.png';
		if (up) {
			i.classList.remove('icon-jiantouxia');
			i.classList.add('icon-jiantoushang');
		} else {
			i.classList.remove('icon-jiantoushang');
			i.classList.add('icon-jiantouxia');
		}
	}
}
